<template>
    <el-form
      style="max-width: 100%; display: flex"
      :model="sizeForm"
      label-width="auto"
      :label-position="labelPosition"
      :size="size"
    >
      <el-form-item label="姓名">
        <el-input  placeholder="请输入姓名" v-model="sizeForm.nickName" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select
          v-model="sizeForm.sex"
          placeholder="男/女"
        >
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
     
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button plain @click="dialogFormVisible = true">
        添加
    </el-button>


  <el-dialog v-model="dialogFormVisible" title="添加用户" width="500" >
    <el-form :model="formtwo" >
      <el-form-item label="账号" :label-width="formLabelWidth" style="margin-bottom: 10px">
        <el-input v-model="formtwo.account" autocomplete="off"  style="margin-bottom: 10px"/>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" style="margin-bottom: 10px">
        <el-input v-model="formtwo.passworkd" autocomplete="off" style="margin-bottom: 10px" />
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth" style="margin-bottom: 10px">
        <el-input v-model="formtwo.nickName" autocomplete="off" style="margin-bottom: 10px"/>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth" style="margin-bottom: 10px">
        <el-input v-model="formtwo.age" autocomplete="off" style="margin-bottom: 10px"/>
      </el-form-item>
      <el-form-item label="身份" :label-width="formLabelWidth" style="margin-bottom: 10px">
        <el-input v-model="formtwo.role" autocomplete="off"style="margin-bottom: 10px" />
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth"style="margin-bottom: 10px">
        <el-input v-model="formtwo.phone" autocomplete="off" style="margin-bottom: 10px"/>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth" >
        <el-select v-model="formtwo.sex" placeholder="男/女">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="user_add()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  
      </el-form-item>
    </el-form>
    
    <div class="bottom">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="account" label="账号" width="120" />
      <el-table-column prop="nickName" label="姓名" width="120" />
      <el-table-column prop="age" label="年龄" width="120" />
      <el-table-column prop="sex" label="性别" width="120" />
      <el-table-column prop="role" label="身份" width="120" />
      <el-table-column prop="phone" label="电话" width="180" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" type="success" @click="up_user_alter( scope.row)">编辑</el-button>
          <el-button size="small" type="danger"  plain @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
  <el-dialog v-model="dialogFormVisible02" title="修改信息" width="500" >
    <el-form :model="form">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="form.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth">
        <el-input v-model="form.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth">
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份" :label-width="formLabelWidth">
        <el-input v-model="form.role" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-select v-model="form.sex" placeholder="男/女">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible02 = false">取消</el-button>
        <el-button type="primary" @click="user_alter()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
  </template>
    

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import {getuserou ,searchUser , alterUser ,addUser ,deleteUser} from '../../api/index'
import {  ElMessageBox, type ComponentSize, type FormProps ,ElMessage } from 'element-plus'
import {getTimenow} from "../../api/request";
const size = ref<ComponentSize>('default')
const labelPosition = ref<FormProps['labelPosition']>('right')
const formLabelWidth = '140px'
const tableData= ref([])
onMounted(async ()=>{
   await  getuserou().then(res=>{
      console.log(res);
      if(res){
        let arr = res.map((item: any) => {
            if(item.role==1){
                item.role='管理员'
            }
            if(item.role==0){
                item.role='超级管理员'
            }
            return {
                id: item.id,
                account: item.account,
                nickName: item.nickName,
                phone: item.phone,
                age:item.age,
                sex:item.sex,
                role:item.role,
                img:item.user_img,
                
            };
        });
        tableData.value = arr;
        form.value = arr
        // console.log(tableData);
        
      }
   })
})
const form = ref({
    account: '',
   
    nickName: '',
    phone: '',
    age: '',
    sex: '',
    role: '',
    id: '',
})
const formtwo = ref({
    account: '',
    nickName: '',
    passworkd: '',
    phone: '',
    age: '',
    sex: '',
    role:'',
    id: '',
})

const dialogFormVisible02 = ref(false)
const dialogFormVisible = ref(false)
//删除
const handleDelete = async(index: number, row: any) => {
//   console.log('删除', index, row);
  let newrow = JSON.parse(JSON.stringify(row))
  ElMessageBox.confirm(
    '确定删除吗?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    let id = newrow.id
     deleteUser({id})
     getTimenow('删除了一个用户')
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })  

}
const sizeForm = reactive({
    nickName: '',
  sex: '',
  delivery: false,
  type: [],

})
// 添加
const user_add = async()=>{
    dialogFormVisible.value = false
    let {account,nickName,passworkd,phone,age,sex,role}  = formtwo.value
    if(role == '管理员'){
        role = "1"
    }
    if(role == '超级管理员'){
        role = "0"
    }
    console.log(role);
    await addUser({account,nickName,passworkd,phone,age,sex,role}).then(res=>{
        console.log(res);
        let {code,msg} = res
        if(code==200){
          getTimenow('添加了一个用户')
            ElMessage.success("添加成功");
        }else{
            console.log(msg);
            ElMessage.error("添加失败");
        }
    })
    console.log(formtwo);
    
}
//打开修改
const up_user_alter = async( row: any)=>{
    dialogFormVisible02.value = true
    let newrow = JSON.parse(JSON.stringify(row))
    // console.log(newrow);
   form.value = newrow
}
//修改
const user_alter = async()=>{
    dialogFormVisible02.value = false
    let {id,role,nickName,phone,sex,age} = form.value
    await alterUser({id,role,nickName,phone,sex,age}).then(res=>{
        console.log(res);
        let {code,msg} = res
        if(code==200){
          getTimenow('修改了一个用户')
            ElMessage.success("修改成功");
        }else{
            console.log(msg);
            ElMessage.error("修改失败");
        }
    })
}
// 搜索
const onSubmit = async()=> {
  console.log(sizeForm);
  let {nickName,sex } = sizeForm
  console.log(nickName,sex);
  let keyword = nickName
  let keyword01 = sex
  console.log(keyword,keyword01);
  
  if(keyword == '' || keyword01 == ""){
    ElMessage.error("查询失败");
    return
}else{
    await searchUser({keyword,keyword01}).then(res=>{
    console.log(res);
    let { code, result } = res
    if(code==200){
      let arr = result.map((item: any) => {
            if(item.role==1){
                item.role='管理员'
            }
            if(item.role==0){
                item.role='超级管理员'
            }
            return {
                account: item.account,
                nickName: item.nickName,
                phone: item.phone,
                age:item.age,
                sex:item.sex,
                role:item.role
            };
        });
        tableData.value = arr
    }else{
        
        ElMessage.error("查询失败");
    }
  })
}
  
}
</script>

<style>
.el-radio-group {
  margin-right: 12px;
}
.el-form-item__content{
    width: 260px;
    margin-right: 30px
}
</style>